<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slick jQuery Slidehow: Demo</title>
<style type="text/css">
<!--
/** 
 * Slideshow style rules.
 */
#slideshow {
	margin:0 auto;
	width:200px;
	height:263px;
	background:transparent url(../slidejquery/slick_accessible_slideshow/img/bg_slideshow.jpg) no-repeat 0 0;
	position:relative; 
}
#slideshow #slidesContainer {
  margin:0 auto;
  width:200px;
  height:263px;
  overflow:auto; /* allow scrollbar */
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:200px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  height:263px;
  border: solid 1px #99FF00
}
/** 
 * Style rules for Demo page
 */
* {
  margin:0;
  padding:0;
  font:normal 11px Verdana, Geneva, sans-serif;
  color:#ccc;
}
a {
  color: #fff;
  font-weight:bold;
  text-decoration:none;
}
a:hover {
  text-decoration:underline;
}
body {
  background:#393737 url(../slidejquery/slick_accessible_slideshow/img/bg_body.jpg) repeat-x top left;
}
#pageContainer {
  margin:0 auto;
  width:960px;
}
#pageContainer h1 {
  display:block;
  width:960px;
  height:114px;
  background:transparent url(../slidejquery/slick_accessible_slideshow/img/bg_pagecontainer_h1.jpg) no-repeat top left;
  text-indent: -10000px;
}
.slide h2{ margin: 15px;
}
.slide h2 {
  font:italic 16px Georgia, "Times New Roman", Times, serif;
  color:#ccc;
  letter-spacing:-1px; display:block; text-align:center;
}
.slide img{ margin-left: 18px;}
#footer {
  height:100px;
}
#footer p {
  margin:30px auto 0 auto;
  display:block;
  width:560px;
  height:40px;
}
.slideInner{ border: solid 1px white}
.imageslinks{ float:left; display:block; margin-bottom: 20px;}
span{ display:block; clear:both; margin-left: 10px; width: 180px}
-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth =200;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides.wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);
 var dddd= setInterval( function(){
	if(currentPosition>=numberOfSlides-1){ currentPosition=-1;}
	currentPosition=currentPosition+1;
    $('#slideInner').animate({'marginLeft' : slideWidth*(-1*currentPosition)},2000);
  },3000);
 });
</script>
</head>
<body>
<div id="pageContainer">
  <h1><a href="http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/">Slick Slideshow using jQuery</a></h1>
  <!-- Slideshow HTML -->
  <div id="slideshow">
    <div id="slidesContainer">
      <div class="slide">
        <h2>Web Development Tutorial</h2>
        <a href="#" class="imageslinks"><img src="../slidejquery/slick_accessible_slideshow/img/img_slide_01.jpg" alt="wordpress." width="160" height="145" /></a>
		<span class="price">Gía Bán : 8.500.000 Vnđ</span>
      </div>
      <div class="slide">
        <h2>Web Development Tutorial</h2>
        <a href="#" class="imageslinks"><img src="../slidejquery/slick_accessible_slideshow/img/img_slide_01.jpg" alt="wordpress." width="160" height="145" /></a>
		<span class="price">Gía Bán : 8.500.000 Vnđ</span>
      </div>
      <div class="slide">
         <h2>Web Development Tutorial</h2>
        <a href="#" class="imageslinks"><img src="../slidejquery/slick_accessible_slideshow/img/img_slide_01.jpg" alt="wordpress." width="160" height="145" /></a>
		<span class="price">Gía Bán : 8.500.000 Vnđ</span>
      </div>
      <div class="slide">
         <h2>Web Development Tutorial</h2>
        <a href="#" class="imageslinks"><img src="../slidejquery/slick_accessible_slideshow/img/img_slide_01.jpg" alt="wordpress." width="160" height="145" /></a>
		<span class="price">Gía Bán : 8.500.000 Vnđ</span>
      </div>
    </div>
  </div>
  <!-- Slideshow HTML -->
  <div id="footer">
    <p><a href="#">Create a Slick and Accessible Slideshow Using  jQuery by Jacob Gube</a> (<a href="http://sixrevisions.com/">Six Revisions</a>)</p>
  </div>
</div>
</body>
</html>
